import React, {useState, useEffect} from 'react'
import './YiYan.less';
import axios from 'axios';

export default function YiYan(props) {
    //创建 state
    const [msg, setMsg] = useState('');

    //生命周期钩子
    useEffect(() => {
        //将 async 函数内容封装在回调内部
        async function fn(){
            //发送请求
            let result = await axios.get('https://v1.hitokoto.cn/');
            setMsg(result.data.hitokoto);
        }
        fn();
        return () => {
            
        }
    }, []);

    //回调声明
    const update = async () => {
        let result = await axios.get('https://v1.hitokoto.cn/');
        setMsg(result.data.hitokoto);
    }

    //获取 bg 参数
    let {bg} = props;

    return (
        <div className="yiyan-container"
            style={{backgroundImage: bg ? 'url(http://api.xiaohigh.com/image/random)' : ''}}
            onClick={update}>
            {msg}
        </div>
    )
}
